<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学生列表</title>
	<script src="resources/js/public/jquery-3.3.1.min.js"></script>
	<script src="resources/js/public/jquery.session.js"></script>
	<script src="resources/layui/layui.js"></script>
	<script src="resources/js/public/vue.min.js"></script>
	<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
	<div id="courseInfo" style="margin-top: 40px">
		<h2>课程编码:{{courseId}}&nbsp;&nbsp;&nbsp;&nbsp;
		课程名称:{{courseName}}&nbsp;&nbsp;&nbsp;&nbsp;
		课程属性:{{property}}&nbsp;&nbsp;&nbsp;&nbsp;
		已选人数:{{selectedNum}}</h2>
	</div>
	<table class="layui-table layui-form">
		<colgroup>
			<col width="100">
			<col width="100">
			<col width="100">
			<col width="100">
		</colgroup>
		<thead>
		<tr>
			<th>学生ID</th>
			<th>学生姓名</th>
			<th>学院</th>
			<th>专业</th>
			<th>出勤情况</th>
		</tr>
		</thead>
		<tbody id="studentList">
			<tr v-for="s in list">
				<td v-text="s.id"></td>
				<td v-text="s.name"></td>
				<td v-text="s.college"></td>
				<td v-text="s.major"></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</div>
</body>
<script>
	var courseId=$.session.get("courseId");
	var courseName=$.session.get("courseName");
    var property=$.session.get("property");
    var selectedNum=$.session.get("selectedNum");

    layui.use(["form","table"],function () {
        var table = layui.table;
        var form=layui.form;

        var vue=new Vue({
			el:"#courseInfo",
			data:{
			    courseId:courseId,
				courseName:courseName,
				property:property,
				selectedNum:selectedNum,
			}
		});

        var vm=new Vue({
			el:"#studentList",
			data:{
			    list:"",
			},
		});

        //发送ajax请求加载该课程下的学生
		$.ajax({
			url:"queryStudentByCourseID",
			type:"get",
			async:false,
			data:{
			    "courseId":courseId,
			},
            success:function (data) {
			    console.log(data);
			    vm.list=data;
			}

		});


    });

</script>
</html>